<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>

    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <script>
        // 点击.box alert相应下标
        var box=document.getElementsByClassName('box');
        for(var i=0;i<box.length;i++){
            box[i].index=i;
            box[i].onclick=function(){
                alert(this.index)
            }
        }

        /*
            1.let拥有块级作用域
            2.let不存在变量的提前声明
            3.let不能重复声明
            4.let虽然是块级作用域但不影响作用域链
        */ 
       for(let i=0;i<box.length;i++){
           box[i].onclick=function(){
               alert(i)
           }
       }
       {
           let girl='班长';
       }
    //    console.log(girl);
    //    var girl='班长';

    // console.log(yuzong);
    let yuzong='没我帅';

    // let yuzong ='比我帅';
    {
        let girl='班长';
        function fn(){
            console.log(girl);
        }
        fn()
    }

    //coust常量(值不能被修改的变量才叫做常量)
    // const 潜规则 声明形式除了声明的类型为函数fn外必须全部大写
    const SCHOOL='KW06金语老师最丑';
    // const 不能被修改---可以修改对象里面或者数组里面的值
    // const 也是拥有块级作用域
    // SCHOOL='不是，'
    {
        const BOY='ddd'
    }
    const ZHANG=['张明','男人','穷人'];
    ZHANGMING.PUSH('未婚');
    console.log(ZHANGMING);

    function laojiang(a,b=1){
        console.log(a+b);
    }
    laojiang(1,3)

    let name='班长';
    let change=function(){
        console.log('真漂亮');
    }
    // const SCHOOL={
        // name:name,
        // change:change
    // }
    const SCHOOL ={name,change};
    console.log(SCHOOL);

    // var fn=function(){}
    // let fn=()=>{}
    const SCHOOL={
        name:'渣男培训学校'
    }
    window.name='123';
    console.log(this);
    function getName(){
        console.log((this.name));
    }
    getName()

    let getName2=()=>{
        console.log(this.name);
    }
    getName2()

    getName.call(SCHOOL)
    getName2.call(SCHOOL)

    /*
        箭头函数开始的时候作用域的this指向某一个位置对象后，就不会改变当前的this
        箭头函数不能作为构造函数实例化对象
        箭头函数参数只有一个的话，可以省略 入参左右的（）
        箭头函数参数里面只有一句话可以省略大括号（如果一句话含有return那么return也省略）
    */ 
    let Person =(name,age)=>{
        this.name=name;
        this.age=age;
    }
    let zhanan=new Person('王思聪','9999999')
    console.log(zhanan);
    let fn=q=>q+q;
    console.log(fn(3));

    const DUIXIANG=['蒋富涛','有钱','有老婆'];
    let [a,b,c]=DUIXIANG;
    console.log(a,b,c);
    // 对象解构给给变量
    const ZHANG={
        name:'张明非',
        age:'999',
        kanren:function(){
            console.log(('我张飞'));
        }
    }
    let {name,age, kanren}=ZHANG;
    console.log(name);
    console.log(age);
    console.log(kanren);
    kanren()

    const BANZHANG=['1','2']
    console.log(...BANZHANG);
    // 应用场景
    const A=['1','2'];
    const B=['3','4'];
    let C=A.concat(B);
    console.log(C);
    // 深拷贝
    const D=[...A];
    console.log(D);
    D[0]='5';
    console.log(D);
    console.log(A);
    // 将DOM的伪数组变成真正意义上的数组
    let divs=document.getElementsByTagName('div');
    console.log(divs);
    const divArr=[...divs];
    console.log(divArr);


    let out='徐衍行';
    let love=`${out}爱老婆`
    console.log(love);

    // JS数据类型分为基本数据类型和引用数据类型
    // 在引用数据类型发生改变时通常是浅拷贝（不考虑特殊改变形式）
    // 浅拷贝
    // let obj={
    //     a:1
    // }
    // let obj1=obj;
    // obj1.a=2;
    // console.log(obj);
    let a={
        a:1,
        b:{
            c:2,
            d:{
                a:[
                    1,2,3,4,5,
                    {
                        k:1,
                        c:0,
                        e:[
                            2,3,4,5,6,7,
                            {
                                a:1,
                                b:2,
                                r:1
                            }
                        ]
                    }
                ]
            }
        }
    }
    // 深拷贝
    // var b=JSON.parse(JSON.stringify(a));
    // b.b.d.a[5].c=1;
    // console.log(a);

    // 递归
    var t1=1;
    var t2=1;
    var tn=0;
    for(var i=1;i<=10;i++){
        tn=t2+t1;
        t1=t2;
        t2=tn;
    }
    document.write(tn)

    let xue=[];
    function tuzi(index){
        if(index<2){
            xue[index]=1
        }else{
            xue[index]=xue[index-1]+xue[index-2]
        }
        if(index<49){
            tuzi(index+1)
        }

        // [1,1]
    }
    tuzi(0)
    console.log(xue);

    // 深拷贝之递归拷贝
    var b=deepClone(a);
    b.b.c=1;
    console.log(b);
    console.log(a);
    function deepClone(obj){
        // Array.isArray()判断是不是数组
        var objClone=Array.isArray(obj)?[]:{};
        // 判断当前obj是不是存在的 null undefined
        if(obj && typeof(obj)=='object'){
            // 循环当前对象
            for(let key in obj){
                // 判断当前// 判断当前对象有没有下标 如果没有就是空对象数组
                // 判断当前对象有没有下标 hasOwnProperty()
                if(obj.hasOwnProperty(key)){
                    // 如果当前obj有下标且obj[key]仍然是对象，那继续把obj[key]
                    // 去重新进deepClone方法
                    if(obj[key] && typeof(obj[key])=='object'){
                        objClone[key]=deepClone(obj[key])
                    }else{
                        objClone[key]=obj[key]
                    }
                }
            }
        }
        return objClone
    }

    // object.assign()
    // 将多个对象的属性和方法都合并到目标对象上面
    // 格式（目标对象，后面跟着多个或者一个原对象）
    let target={}
    let name1={
        name:'img',
        age:'123'
    }
    let name2={
        sex:'男'
    }
    let name3={
        sex:'女'
    }
    Object.assign(target,name1,name2,name3);
    console.log(target);
    </script>

    
</body>
</html>